<template>
  <div>
    <Title>
      左岸酒窖
    </Title>
    <!-- 搜索模块 -->
    <van-search v-model="value" placeholder="搜索商品" input-align="center" @click="goSearch" />
    <!-- 轮播图 -->
    <Swipe></Swipe>
    <!-- 金刚区 -->
    <CyGrid ></CyGrid>
    <div class="gray"></div>
    <!-- 左岸说模块 -->
    <div class="zuoansay">
      <img src="../../assets/cyimages/images/1index2_03.png" alt />
      <van-grid :column-num="3" gutter="0">
        <van-grid-item v-for="(item,index) in textlist" 
        :key="index"  
        :text="item.chinese" 
        >
        <span class="chinese">{{item.chinese}}</span>
        <span class="english">{{item.english}}</span>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 中间图片区 -->
    <div class="midpic">
      <img src="../../assets/cyimages/images/1index2m1_03.png" alt="">
      <img src="../../assets/cyimages/images/1index2m2_03.png" alt="">
    </div>
    <!-- more区 -->
    <More></More>
  </div>
</template>

<script>
import Vue from "vue";
import { Search } from "vant";
import Swipe from "../../components/swipe";
import CyGrid from "../../components/cyGrid";
import More from "home/more";
import Title from "home/Title";


Vue.use(Search);
export default {
  data() {
    return {
      item: "",
      value:'',
      textlist:[
        {
          chinese:"优惠劵",
          english:"Coupon"
        },
        {
          chinese:"积分商城",
          english:"Integral Mall"
        },
        {
          chinese:"签到有礼",
          english:"Sign in Courtesy"
        },
        {
          chinese:"活动专区",
          english:"Activity zone"
        },
        {
          chinese:"关于我们",
          english:"About Us"
        },
        {
          chinese:"在线客服",
          english:"Online Service"
        }
      ]
    };
  },
  methods:{
    goSearch(){
      this.$router.push('/search')
    }
  },
  created() {
  },
  computed: {},
  components: {
    Swipe,
    CyGrid,
    More,
    Title
  }
};
</script>

<style  scoped>
.header {
  height: 0.64rem;
  line-height: 0.64rem;
  text-align: center;
}

.van-search {
  padding: 0 !important;
}

.gray {
  height: 0.16rem;
  background-color: #f7f8fa;
}

.zuoansay img {
  width: 100%;
  padding: 0.05rem;
}
.chinese{
  font-size:14px;
  font-weight :600;
}
.english{
  font-size:10px;
  color:#8b8b8b;
}
.van-grid-item /deep/ .van-grid-item__content{
      padding: .22rem 0px;
}
.midpic{
  /* height:140px; */
  background-color:#f7f8fa;
  padding:0 .2rem;
  overflow: hidden;
}
.midpic img{
  width:50%;
  padding:.15rem .1rem;
}
</style>
